<template>
  <div id="LabFeeVSBarCode">
    <Breadcrumb content="分管类别和申请项目对照" />
    <div class="bodyContent">
      <el-tabs type="border-card">
        <el-tab-pane label="项目对照">
          <Splitpanes class="area">
            <!-- 左侧分管类别列表 -->
            <Pane :size="(600 / conWidth) * 100">
              <vxe-toolbar perfect>
                <template #buttons>
                  <vxe-input v-model="searchForm.barCodesSearchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="getBarCodeList" @keyup="getBarCodeList" @search-click="getBarCodeList()"></vxe-input>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="showLoading" @click="getBarCodeList"></vxe-button>
                </template>
              </vxe-toolbar>
              <div class="leftTable">
                <vxe-table ref="barCodeTypeTable" border class="mytable-scrollbar" show-header-overflow show-overflow align="center" :row-config="{ isCurrent: true, isHover: true }" @current-change="barCodeRowClick" :data="barCodeList" :loading="showLoading">
                  <vxe-column type="seq" title="序号" width="30"></vxe-column>
                  <vxe-column field="barcodeNo" title="编码" width="60" :edit-render="{ autofocus: '.vxe-input--inner' }">
                    <template #edit="{ row }">
                      <vxe-input v-model="row.barcodeNo" clearable @clear="() => {}" @keyup.enter.native="() => {}" placeholder="关键字查询"></vxe-input>
                    </template>
                  </vxe-column>
                  <vxe-column field="barcodeNa" title="名称" min-width="146" align="left" :edit-render="{ autofocus: '.vxe-input--inner' }">
                    <template #edit="{ row }">
                      <vxe-input v-model="row.barcodeNa" clearable @clear="() => {}" @keyup.enter.native="() => {}" placeholder="关键字查询"></vxe-input>
                    </template>
                  </vxe-column>
                  <vxe-column field="shortName" title="简称" width="90" :edit-render="{ autofocus: '.vxe-input--inner' }">
                    <template #edit="{ row }">
                      <vxe-input v-model="row.shortName" type="text"></vxe-input>
                    </template>
                  </vxe-column>
                  <vxe-column field="labelPrintNum" title="打印份数" width="70" :edit-render="{ autofocus: '.vxe-input--inner' }">
                    <template #edit="{ row }">
                      <vxe-input v-model="row.labelPrintNum" type="integer"></vxe-input>
                    </template>
                  </vxe-column>
                  <vxe-column field="color" title="颜色" width="75" :edit-render="{ autofocus: '.vxe-input--inner' }">
                    <template #default="{ row }">
                      <el-tag class="margin-lr-xs" :style="{ background: row.color ? row.color : '' }" v-if="row.color">{{ row.color }}</el-tag>
                    </template>
                    <template #edit="{ row }">
                      <vxe-input v-model="row.color" type="text"></vxe-input>
                    </template>
                  </vxe-column>
                </vxe-table>
              </div>
            </Pane>
            <!-- 右侧项目信息 -->
            <Pane :size="((conWidth - 1000) / conWidth) * 100">
              <vxe-toolbar perfect>
                <template #buttons>
                  <vxe-input v-model="searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="getFeeItemList" @keyup="getFeeItemList" @search-click="getFeeItemList()"></vxe-input>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="showLoading" @click="findFeeItemVsBarCodeList(selevctBarCodeRow.barcodeNo)"></vxe-button>

                  <vxe-button type="text" icon="vxe-icon-delete" class="button-red" content="删除" @click="deleteFeeItemVsBarCodeList"></vxe-button>

                  <vxe-button type="text" class="button-blue" icon="vxe-icon-add" content="上移" @click="moveUp()"></vxe-button>

                  <vxe-button type="text" class="button-blue" icon="vxe-icon-add" content="下移" @click="moveDown()"></vxe-button>
                  <div class="msgDiv">双击项目移除对应关系</div>
                </template>
              </vxe-toolbar>
              <div class="leftTable">
                <vxe-table ref="feeItemVsBarCodeTable" border resizable class="mytable-scrollbar" show-header-overflow show-overflow align="center" :row-config="{ isCurrent: true, isHover: true }" @cell-dblclick="deleteFeeItemVsBarCodeList" @current-change="feeItemVsBarCodeRowClick" :data="feeItemVsBarCodeList" :loading="showLoading">
                  <vxe-column type="checkbox" width="30px" align="center"></vxe-column>
                  <vxe-column type="seq" title="序号" width="30"></vxe-column>
                  <vxe-column field="feeCode" title="项目编号" width="70" align="left"></vxe-column>
                  <vxe-column field="feeName" title="项目名称" min-width="160" align="left"></vxe-column>
                  <vxe-column field="feeClass" title="项目类型" width="70"></vxe-column>
                  <vxe-column field="spec" title="规格" width="70"></vxe-column>
                  <vxe-column field="price" title="单价" width="70"></vxe-column>
                  <vxe-column field="shortName" title="项目简称" width="70"></vxe-column>
                  <vxe-column field="remake" title="备注" width="100"></vxe-column>
                </vxe-table>
              </div>
            </Pane>
            <Pane :size="(500 / conWidth) * 100">
              <vxe-toolbar perfect>
                <template #buttons>
                  <vxe-input v-model="FeeItemSearchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="getFeeItemList" @keyup="getFeeItemList" @search-click="getFeeItemList()"></vxe-input>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="showLoading" @click="getFeeItemList"></vxe-button>
                  <div class="msgDiv">双击项目添加对应关系</div>
                </template>
              </vxe-toolbar>
              <div class="leftTable">
                <vxe-table ref="labFeeItemTable" border class="mytable-scrollbar" show-header-overflow show-overflow align="left" :row-config="{ isCurrent: true, isHover: true }" @cell-dblclick="feeItemrowClick" :data="FeeItemList" :loading="showLoading">
                  <vxe-column type="seq" title="序号" width="30"></vxe-column>
                  <vxe-column field="feeCode" title="项目编号" width="60" align="left"></vxe-column>
                  <vxe-column field="feeName" title="项目名称" min-width="120" align="left"></vxe-column>
                  <vxe-column field="shortName" title="项目简称" width="65"></vxe-column>
                  <vxe-column field="price" title="单价" align="right" width="60"></vxe-column>
                </vxe-table>
              </div>
            </Pane>
          </Splitpanes>
        </el-tab-pane>
        <el-tab-pane label="操作日志">
          <LogInfo requestUrl="/lis/fee/item"></LogInfo>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示信息
import { DateToString, IsEmpty, sortByField } from '@/utils/common';
import LogInfo from '@/components/LogInfo.vue'; //日志
import { AppStore } from '@/stores/store';
let store = AppStore();

// 全局变量定义区 ==========
// 变量定义区
let { proxy }: any = getCurrentInstance();
let conWidth = ref(document.documentElement.clientWidth);
const barCodeList = reactive([]);
let selevctBarCodeRow: any = reactive({
  id: ''
});
let FeeItemList = reactive([]);
let showLoading = ref(false); //刷新+表格加载
let searchValue = ref('');
let FeeItemSearchValue = ref('');

const searchForm = reactive({
  orgId: store.userInfo.orgId,
  barCodesSearchValue: '',
  name: store.userInfo.orgName
});
const feeItemVsBarCodeList = reactive([]);
let feeItemVsBarCodeIndex: any = ref();

// 方法定义区 =============
onMounted(() => {
  getBarCodeList();
});
// 获取分管类别列表
function getBarCodeList() {
  barCodeList.length = 0;
  showLoading.value = true;
  const url = '/api/lab/labbarcodetype/findBarCodeTypeList';
  let obj = {
    keyWords: '',
    orgId: searchForm.orgId
  };
  proxy.$http
    .get(url, { params: obj })
    .then((res: any) => {
      barCodeList.push(...sortByField(res.data, 'barcodeNo', 'asc'));
      if (barCodeList.length > 0) {
        barCodeRowClick({ row: barCodeList[0] });
      }
      showLoading.value = false;
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
      showLoading.value = false;
    });
}

// 获取申请项目列表
function getFeeItemList() {
  FeeItemList.length = 0;
  showLoading.value = true;
  const url = '/lis/fee/item/findFeeItemList';
  let obj = {
    keyWords: FeeItemSearchValue.value,
    barcodeNo: selevctBarCodeRow.barcodeNo
  };
  proxy.$http
    .get(url, { params: obj })
    .then((res: any) => {
      FeeItemList.length = 0;
      Object.assign(FeeItemList, res.data);
      //FeeItemList.push(...res.data);
      showLoading.value = false;
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
      showLoading.value = false;
    });
}
// 删除数据
function deleteFeeItemVsBarCodeList({ row }: any) {
  // const selectRows = (proxy.$refs.feeItemVsBarCodeTable as any).getCheckboxRecords();
  // if (selectRows.length > 1) {
  //   VxeMessage('一次只可选择删除一条数据', VxeNotifyType.warning);
  //   return;
  // }
  // if (selectRows.length <= 0) {
  //   VxeMessage('请选择需要删除的用户', VxeNotifyType.warning);
  //   return;
  // }
  const url = '/lis/feeVsBar/barcode/deleteFeeItemBarCode';
  proxy.$http
    .post(url, {
      id: row.vsBarCodeTypeId,
      feeName: row.feeName
    })
    .then((res: any) => {
      findFeeItemVsBarCodeList(selevctBarCodeRow.barcodeNo);
      getFeeItemList();
      VxeMessage(res.status.msg, VxeNotifyType.success);
    })
    .catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
    });
}
// 点击当前行// 行点击事件
function barCodeRowClick({ row }: any) {
  (proxy.$refs.barCodeTypeTable as any).setCurrentRow(row);
  selevctBarCodeRow = row;

  findFeeItemVsBarCodeList(row.barcodeNo);
  getFeeItemList();
}

function feeItemVsBarCodeRowClick({ row, rowIndex }: any) {
  feeItemVsBarCodeIndex.value = rowIndex;
}

// 获取中间的项目信息
function findFeeItemVsBarCodeList(barcodeNo: string) {
  feeItemVsBarCodeList.length = 0;
  const url = '/lis/fee/item/findFeeItemListByBarCodeId/' + barcodeNo;
  proxy.$http
    .get(url)
    .then((res: any) => {
      feeItemVsBarCodeList.push(...res.data);
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}
//
function feeItemrowClick({ row }: any) {
  const url = '/lis/feeVsBar/barcode/addFeeItemBarCode';
  let addFeeItemVsBarCode = {
    feeCode: row.feeCode,
    barcodeNo: selevctBarCodeRow.barcodeNo,
    seq: feeItemVsBarCodeList.length + 1
  };
  proxy.$http
    .post(url, addFeeItemVsBarCode)
    .then((res: any) => {
      VxeMessage('挪动成功', VxeNotifyType.success);
      findFeeItemVsBarCodeList(selevctBarCodeRow.barcodeNo);
      getFeeItemList();
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}
// 上移
function moveUp() {
  let id1 = feeItemVsBarCodeList[feeItemVsBarCodeIndex.value].vsBarCodeTypeId;
  let id2 = feeItemVsBarCodeList[feeItemVsBarCodeIndex.value - 1].vsBarCodeTypeId;
  let ids = [];
  ids.push(id1 + '');
  ids.push(id2 + '');
  updateMoveSeq(ids);
}
// 下移
function moveDown() {
  let id1 = feeItemVsBarCodeList[feeItemVsBarCodeIndex.value].vsBarCodeTypeId;
  let id2 = feeItemVsBarCodeList[feeItemVsBarCodeIndex.value + 1].vsBarCodeTypeId;
  let ids = [];
  ids.push(id1 + '');
  ids.push(id2 + '');
  updateMoveSeq(ids);
}

function updateMoveSeq(ids: any) {
  const url = '/lis/feeVsBar/barcode/updateMoveSeq';
  proxy.$http
    .post(url, ids)
    .then((res: any) => {
      console.log(res);
      findFeeItemVsBarCodeList(selevctBarCodeRow.barcodeNo);
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}
</script>
<style lang="scss" scoped>
#LabFeeVSBarCode {
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);
    .el-tabs {
      height: 100%;
      :deep(.el-tabs__content) {
        height: calc(100% - 39px);
        padding: 0;
        .el-tab-pane {
          height: 100%;
          .area {
            background-color: $base-white;
            // 附加按钮间距
            .button-blue,
            .button-red {
              margin: 5px 0 5px 5px;
            }
            .leftTable {
              height: calc(100% - 40px);
              .vxe-table--render-wrapper {
                height: 100%;
                .vxe-table--main-wrapper {
                  height: 100%;
                  .vxe-table--body-wrapper {
                    height: calc(100% - 26px) !important;
                  }
                }
              }
              .vxe-table--render-default {
                height: 100%;
              }
            }
            .msgDiv {
              margin-left: 5px;
              color: rgb(180, 28, 28);
            }
          }
        }
      }
    }
  }
}
</style>
